<app-common-header [title]="i18n.page_title" [routerUrl]="'/tabs/myAccount/setting/message-notification'">
</app-common-header>


<ion-content>
    <ion-list>
        <ion-item [button]="!option.toggle" *ngFor="let option of options" (click)="showDetail($event,option.id)">
            <!-- <ion-icon slot="start" name="logo-{{tech.icon}}"></ion-icon> -->
            <ion-label class="i-label">
                <div class="ion-float-left">
                    <ion-text color="" class="title_size"> {{option.title}} </ion-text>
                    <ion-label [ngStyle]="{'display': option.comment?'block':'none'}">
                        <ion-text color="" class="comment_font"> {{'myAccount.setting.message_notification_setting.duedate_reminder_setting.reminder_time_comment' | translate}} </ion-text>
                    </ion-label>
                </div>
                <div class="ion-float-right" [ngStyle]="{'display': option.toggle ? 'block':'none'}">
                    <ion-toggle color="primary" [(ngModel)]="option.optionEnable" class="toggle_width"
                        [ngClass]="{'toggle_off':!option.optionEnable,'toggle_on':option.optionEnable}"
                        (ionBlur)="changeDueDateToggle($event,option)"></ion-toggle>
                </div>
                <div class="ion-float-right" [ngStyle]="{'display': !option.toggle ? 'block':'none'}" >
                   <!--  <ion-datetime [pickerOptions]="dateOptions" [monthShortNames]="customerMonthShortNames" [value]="selectedDate" class="item_datetime" placeholder="" (ionChange)="dateChange($event)" displayFormat="MMM DD">
                    </ion-datetime> -->
                    <div class="date_text">
                        <ion-text color=""> 
                            {{ selectedDate }}
                        </ion-text>
                    </div>
                </div>
            </ion-label>
        </ion-item>
    </ion-list>
</ion-content>